<template>
  <div>
    <h2>手写签名</h2>
    <SignaturePad
      ref="signaturePad"
      :width="600"
      :height="200"
      @save="handleSave"
      @cleared="handleClear"
    />
    
    <div style="margin-top: 20px;">
      <button @click="getSignature">获取签名数据</button>
      <button @click="loadSignature">加载签名</button>
    </div>
  </div>
</template>

<script>
import SignaturePad from './components/SignaturePad.vue'

export default {
  components: {
    SignaturePad
  },
  methods: {
    handleSave(imageUrl) {
      console.log('签名已保存:', imageUrl)
      // 处理签名数据
    },
    handleClear() {
      console.log('签名已清空')
    },
    getSignature() {
      const signatureData = this.$refs.signaturePad.getSignatureData()
      console.log('签名数据:', signatureData)
    },
    loadSignature() {
      // 从外部加载签名
      this.$refs.signaturePad.setSignatureFromBase64('your-base64-string-here')
    }
  }
}
</script>